import React, { Component } from 'react'
import Mytab from '../root/Mytab'
import pxPage from '../../root/pxPage'
import { ImagePicker, List, InputItem } from 'antd-mobile';
import { getMsg, addsp_temp, errToast,modifysp_temp } from '../../redux/actionCreator'
import { withRouter } from "react-router-dom"
import { connect } from 'react-redux'
const deviceHight = document.documentElement.clientHeight
const addspdiv = {
    width: '100%',
    height: deviceHight - 190 - pxPage(15),
    paddingTop: pxPage(15),
    borderTop: '1px solid #fff'
}
const addspdivdiv = {
    width: pxPage(338),
    height: pxPage(378),
    backgroundColor: 'rgb(212, 118, 102)'
}
const addspdivdivtwo = {
    width: '100%',
    height: pxPage(100),
    position: 'relative',
    backgroundColor: 'black'
}
const addspdivdivtwoi = {
    position: 'absolute',
    left: pxPage(64),
    top: pxPage(15),
    fontSize: pxPage(44)
}
const addspdivdivtwoii = {
    position: 'absolute',
    right: pxPage(64),
    top: pxPage(15),
    fontSize: pxPage(44)
}
// 输入框样式
const addspinputone = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    right: pxPage(30),
    top: pxPage(165),
}
const addspinputtwo = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    right: pxPage(30),
    top: pxPage(205),
}
const addspinputthree = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    right: pxPage(30),
    top: pxPage(245),
}
const addspinputfour = {
    width: pxPage(80),
    height: pxPage(30),
    position: 'absolute',
    right: pxPage(30),
    top: pxPage(285),
}
const addspinputfourhalf = {
    width: pxPage(80),
    height: pxPage(30),
    position: 'absolute',
    right: pxPage(110),
    top: pxPage(285),
}
const addspinputfive = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    right: pxPage(30),
    top: pxPage(325),
}
const addspimg = {
    width: pxPage(140),
    height: pxPage(140),
    position: 'absolute',
    right: pxPage(35),
    top: pxPage(25),
    borderRadius: '10px',
    objectFit: 'cover'
}
// 左侧文本
const addspdivone = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    left: pxPage(40),
    top: pxPage(80),
    fontSize: pxPage(15)
}
const addspdivtwo = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    left: pxPage(40),
    top: pxPage(165),
    fontSize: pxPage(15)
}
const addspdivthree = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    left: pxPage(40),
    top: pxPage(205),
    fontSize: pxPage(15)
}
const addspdivfour = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    left: pxPage(40),
    top: pxPage(245),
    fontSize: pxPage(15)
}
const addspdivfive = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    left: pxPage(40),
    top: pxPage(285),
    fontSize: pxPage(15)
}
const addspdivsix = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    left: pxPage(40),
    top: pxPage(325),
    fontSize: pxPage(15)
}
export class Modifysp_temp extends Component {
    constructor(props) {
        super(props);
        let id = this.props.match.params.id
        let modify = this.props.shop_temp.filter((item) => {
            return item.commodity_temp_id == id
        })[0]
        const data = [{
            url: `http://www.h5weixin.club:1025/api/image/${modify.commodity_temp_pic}`,
        }];
        let times = modify.commodity_temp_t.split('-')
        this.state = {
            Files: data,
            multiple: false,
            business_id: modify.business_id,//商家id
            commodity_temp_title: modify.commodity_temp_title,//商品名字
            commodity_temp_descript: modify.commodity_temp_descript,//商品描述
            commodity_temp_money: modify.commodity_temp_money,//商品价格
            commodity_temp_endtime:times[0],//营业时间'06:00'
            commodity_temp_strtime:times[1],
            commodity_temp_addres: modify.commodity_temp_addres//地址
        }
        this.onChange = this.onChange.bind(this)
        this.handleChangetitle = this.handleChangetitle.bind(this)
        this.handleChangdescript = this.handleChangdescript.bind(this)
        this.handleChangmoney = this.handleChangmoney.bind(this)
        this.handleChangstrtime = this.handleChangstrtime.bind(this)
        this.handleChangendtime = this.handleChangendtime.bind(this)
        this.handleChangaddr = this.handleChangaddr.bind(this)
    }

    onChange = (Files, type, index) => {
        this.setState({ Files, });
    }
    handleChangetitle = (e) => {//商品名字
        this.setState({ commodity_temp_title: e.target.value })
    }
    handleChangdescript = (e) => {//商品描述
        this.setState({ commodity_temp_descript: e.target.value })
    }
    handleChangmoney = (e) => {//价格
        this.setState({ commodity_temp_money: e.target.value })
    }
    handleChangstrtime = (e) => {//时间
        this.setState({ commodity_temp_strtime: e.target.value })
    }
    handleChangendtime = (e) => {//时间
        this.setState({ commodity_temp_endtime: e.target.value })
    }
    handleChangaddr = (e) => {//地址
        this.setState({ commodity_temp_addres: e.target.value })
    }
    render() {
        const { Files } = this.state;
        return (
            <div className='addsp' style={{ backgroundColor: 'black', position: 'relative', color: 'black' }}>
                <Mytab />
                <div style={addspdiv}>
                    <div className='addsp-div-div' style={addspdivdiv}>
                        <div style={addspdivone}>修改商品图片</div>
                        <div style={addspdivtwo}>修改商品名字</div>
                        <div style={addspdivthree}>修改商品描述</div>
                        <div style={addspdivfour}>修改商品价格</div>
                        <div style={addspdivfive}>修改营业时间</div>
                        <div style={addspdivsix}>修改所在地址</div>
                        <ImagePicker
                            files={Files}
                            style={addspimg}
                            onChange={this.onChange}
                            selectable={Files.length < 1}
                            multiple={this.state.multiple}
                            length='1'
                        />
                        <input
                            className='addsp-form-input-one'
                            style={addspinputone}
                            placeholder='输入商品名字'
                            type='text'
                            value={this.state.commodity_temp_title}
                            onChange={this.handleChangetitle}
                        ></input>
                        <input
                            className='addsp-form-input-two'
                            style={addspinputtwo}
                            placeholder='输入商品描述'
                            type='text'
                            value={this.state.commodity_temp_descript||''}
                            onChange={this.handleChangdescript}
                        ></input>
                        <input
                            className='addsp-form-input-three'
                            style={addspinputthree}
                            placeholder='输入商品价格'
                            type='number'
                            value={this.state.commodity_temp_money}
                            onChange={this.handleChangmoney}
                        ></input>
                        <input
                            className='addsp-form-input-four'
                            style={addspinputfour}
                            placeholder='输入开始时间'
                            type='time'
                            value={this.state.commodity_temp_strtime}
                            onChange={this.handleChangstrtime}
                        ></input>
                        <input
                            className='addsp-form-input-four-half'
                            style={addspinputfourhalf}
                            placeholder='输入结束时间'
                            type='time'
                            value={this.state.commodity_temp_endtime}
                            onChange={this.handleChangendtime}
                        ></input>
                        <input
                            className='addsp-form-input-five'
                            style={addspinputfive}
                            placeholder='输入地址'
                            type='text'
                            value={this.state.commodity_temp_addres || ''}
                            onChange={this.handleChangaddr}
                        ></input>
                    </div>
                    <div className='addsp-div-div-two' style={addspdivdivtwo}>
                        <div
                            style={addspdivdivtwoi}
                            onClick={() => {
                                if (this.state.commodity_temp_addres == '' || this.state.commodity_temp_title == '' || this.state.commodity_temp_descript == '' || this.state.commodity_temp_money == '' || this.state.commodity_temp_strtime == '' || this.state.commodity_temp_endtime == '' || this.state.Files == 'undefined') {
                                    errToast('不能为空')
                                } else {
                                    this.props.dispatch(modifysp_temp(this.props.match.params.id,getMsg(this.props).business_id,getMsg(this.props).business_password))
                                    this.props.dispatch(
                                        addsp_temp(getMsg(this.props).business_id,
                                            this.state.commodity_temp_title,
                                            this.state.commodity_temp_descript,
                                            this.state.commodity_temp_money,
                                            `${this.state.commodity_temp_strtime}-${this.state.commodity_temp_endtime}`,
                                            this.state.commodity_temp_addres,
                                            this.state.Files
                                        ))
                                    this.props.history.push('/bushome/examine')
                                }
                            }}
                        >
                            <i style={{ fontSize: pxPage(44) }} className='iconfont icon-duigou'></i>
                        </div>
                        <div
                            style={addspdivdivtwoii}
                            onClick={() => {
                                this.props.history.goBack()

                            }}
                        >
                            <i style={{ fontSize: pxPage(44) }} className='iconfont icon-cancel'></i>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    login: state.login,
    shop: state.shop,
    business: state.business,
    shop_temp: state.shop_temp,
})
export default withRouter(connect(mapStateToProps)(Modifysp_temp))
